// --------------------------------------------------
// Mixins
// --------------------------------------------------
// clearfix
@mixin clearfix() {
  &::before,
  &::after {
    content: " "; // 1
    display: table; // 2
  }

  &::after {
    clear: both;
  }
}

// grid
@mixin make-grid-columns($i: 1, $list: ".col-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-#{$i}";
  }

  .col, #{$list} {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-left: ceil(($grid-gutter / 2));
    padding-right: floor(($grid-gutter / 2));
  }
}

@mixin make-grid-columns-without-gutter($i: 1, $list: ".col-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-#{$i}";
  }

  .col, #{$list} {
    padding: 0;
  }
}

@mixin loop-grid-columns($columns) {
  @for $i from 1 through $columns {
    @if ($columns==12) {
      .col-#{$i} {
        flex: 0 0 percentage($i / $columns);
        max-width: percentage($i / $columns);
      }

      .col-offset-#{$i} {
        margin-left: percentage($i / $columns);
      }
    }

    @else {
      .cols-#{$columns} > .col-#{$i} {
        flex: 0 0 percentage($i / $columns);
        max-width: percentage($i / $columns);
      }

      .cols-#{$columns} > .col-offset-#{$i} {
        margin-left: percentage($i / $columns);
      }
    }
  }
}

@mixin make-grid-columns-equal() {
  .col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
}
